<template>
  <div class="login-container">
    <!--导航栏-->
    <van-nav-bar class="login-nav-bar" title="登录"><van-icon slot="left" name="arrow-left" @click="$router.back()" /></van-nav-bar>
    <!--表单-->
    <div class="login-wrapper">
      <h3>账号登录</h3>
      <van-form ref="loginForm" @submit="onSubmit">
        <van-field v-model="username" name="username" placeholder="请输入用户名" :rules="userFormRules.username" type="number">
          <i slot="left-icon" class="iconfont icon-zhanghao"></i>
        </van-field>
        <van-field v-model="password" name="password" placeholder="请输入密码" :rules="userFormRules.password" type="password">
          <i slot="left-icon" class="iconfont icon-mima"></i>
        </van-field>
        <div class="submit-btn">
          <van-button block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { PostLoginData } from '@/request/api'
export default {
  name: 'Login',
  components: {},
  data () {
    return {
      username: '', // 用户名
      password: '', // 密码
      userFormRules: {
        username: [{
          required: true,
          message: '用户名不能为空'
        }],
        password: [{
          required: true,
          message: '密码不能为空'
        }]
      }
    }
  },
  methods: {
    // 点击登录
    onSubmit (values) {
      // console.log('username', values)
      // console.log('pwd', values)
      const username = values['用户名']
      const pwd = values['密码']
      PostLoginData({
        username,
        pwd
      }).then(res => {
        // if (res.errno === 0) {
        // console.log(res.data)
        // }
        // console.log(res)
        // 1.登录成功
        this.$toast.success('登录成功')
        // 2.把token保存到本地存储
        localStorage.setItem('token', res.data.token)
        // 3.把会员信息保存到本地
        localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
        // 4.登录成功，页面返回上一页
        this.$router.back()
      })
    }
  }
}
</script>

<style scoped lang="less">
.login-container{
  width: 100%;
  .van-nav-bar .van-icon{
    color: #333;
  }
}
.login-wrapper{
  padding: 0 20px;
  h3{
    font-size: 22px;
    font-weight: 400;
    margin: 30px 0;
  }
  .van-cell{
    padding: 10px;
    .iconfont{
      font-size: 24px;
    }
    .icon-zhanghao{
      font-size: 26px;
    }
  }
  .submit-btn{
    margin: 40px 30px 0 30px;
    .van-button--info{
      background-color: #b75d12;
      border-color: #b75d12;
    }
  }
}
</style>
